import React from 'react'

class App extends React.Component{
    constructor(props) {
        super(props)
        // 组件状态
        this.state = {
             count: 1
        }
    }

    handleChange = () => {
        // 异步演示
        // 传入对象的方式修改state
        // console.log('前',this.state.count)
        // this.setState({
        //     count: this.state.count+1
        // })
        // // 这里打印值是？
        // console.log('后',this.state.count)

        // ==================================================

        // 传入对象的方式修改state
        // console.log('前',this.state.count)
        // this.setState({
        //     count: this.state.count+1
        // })
        // this.setState({
        //     count: this.state.count+2
        // })
        // // React最后会统一处理setState传入的值，并且以最后一次传入的为准
        // console.log('后',this.state.count)

        // ==================================================

        // 传入更新函数updater(state, props)，state和props是最新的
        // console.log('前',this.state.count)
        // this.setState((state, props) => {
        //     // 异步代码
        //     console.log('异步代码，此次setState生效前最新的state',state)
        //     return{
        //         // 修改状态
        //         count: state.count+1
        //     }
        // })
        // // 注意点两个：1、前和后打印的state的值。2、前和后的打印顺序和异步代码的打印顺序
        // console.log('后',this.state.count)

        // ==================================================

        // console.log('前',this.state.count)
        // this.setState((state, props) => {
        //     // 异步代码
        //     console.log('异步代码1，此次setState生效前最新的state',state)
        //     return{
        //         // 修改状态
        //         count: state.count+1
        //     }
        // })
        // this.setState((state, props) => {
        //     console.log('异步代码2，此次setState生效前最新的state',state)
        //     return{
        //         // 修改状态
        //         count: 99
        //     }
        // })
        // // 注意点：1、前和后打印的state的值。2、前和后的打印顺序和异步代码的打印顺序。3、render方法的调用次数，多次setState只调用一次。
        // console.log('后',this.state.count)

        // ==============================================

        // console.log('前',this.state.count)
        // this.setState((state, props) => {
        //   return {
        //     count: state.count+1
        //   }
        // } , () => {
        //   // 更新后的state
        //   console.log('1111', this.state.count)
        //   document.title = "1111"
        // })
        // console.log('后',this.state.count)


        // ==============================================

        // console.log('前',this.state.count)
        // this.setState((state, props) => {
        //   return {
        //     count: state.count+1
        //   }
        // } , () => {
        //   // 更新后的state
        //   console.log('1111', this.state.count)
        //   document.title = "1111"
        // })
        // this.setState((state, props) => {
        //   return {
        //     count: state.count+1
        //   }
        // } , () => {
        //   console.log('2222', this.state.count)
        //   document.title = "2222"
        // })
        // console.log('后',this.state.count)


        // ==============================================

        // this.setState((state, props) => {
        //   return {
        //     count: state.count+1
        //   }
        // } , () => {
        //   // 更新后的state
        //   console.log('1111', this.state.count)
        //   // 注意在这里更新dom和componentDidUpdate中更新dom，以这里为准
        //   document.title = "1111"
        // })
    }

    // componentDidUpdate() {
    //     console.log('3333', this.state.count)
    //     document.title = "xxx"
    // }

    render(){
        console.log('render 中的state', this.state)
        return(
            <div>
                <h1>{this.state.count}</h1>
                <button onClick={this.handleChange}>修改</button>
            </div>
        )
    }
    
}

export default App